<template>
  <div class="home-container">
    <el-card class="welcome-card glass-card">
      <div class="welcome">
        <h1>欢迎使用低代码开发平台</h1>
        <p>这是一个基于Spring Boot + Vue + MySQL + Redis的前端低代码开发通用服务平台</p>
      </div>
      
      <el-row :gutter="20" style="margin-top: 30px;">
        <el-col :span="6">
          <el-card class="stat-card glass-card">
            <div class="stat-icon" style="background: #333;">
              <i class="el-icon-user"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">用户管理</div>
              <div class="stat-desc">RBAC权限控制</div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card class="stat-card glass-card">
            <div class="stat-icon" style="background: #666;">
              <i class="el-icon-lock"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">角色权限</div>
              <div class="stat-desc">灵活的权限分配</div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card class="stat-card glass-card">
            <div class="stat-icon" style="background: #999;">
              <i class="el-icon-folder"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">文件管理</div>
              <div class="stat-desc">支持分片上传</div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card class="stat-card glass-card">
            <div class="stat-icon" style="background: #ccc;">
              <i class="el-icon-s-tools"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">系统管理</div>
              <div class="stat-desc">完善的管理功能</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/global.scss';

.home-container {
  padding: 20px;
}

.welcome-card {
  border-radius: $border-radius-lg;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  transition: $transition-base;
}

.welcome {
  text-align: center;
  padding: 40px 0;
}

.welcome h1 {
  font-size: 32px;
  color: #333;
  margin-bottom: 20px;
}

.dark .welcome h1 {
  color: #fff;
}

.welcome p {
  font-size: 16px;
  color: #666;
}

.dark .welcome p {
  color: #aaa;
}

.stat-card {
  cursor: pointer;
  transition: $transition-base;
  border-radius: $border-radius;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: $shadow-medium;
}

.dark .stat-card:hover {
  box-shadow: $dark-shadow-medium;
}

.stat-card >>> .el-card__body {
  display: flex;
  align-items: center;
  padding: 20px;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.stat-icon i {
  font-size: 28px;
  color: #fff;
}

.stat-info {
  flex: 1;
}

.stat-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.dark .stat-title {
  color: #fff;
}

.stat-desc {
  font-size: 14px;
  color: #999;
}

.dark .stat-desc {
  color: #aaa;
}
</style>